Atomic Design

https://gyazo.com/23d85ea1e3f56062bdd15a0d29206078

Atomic Design とは

パーツ・コンポーネント単位で定義していく UI デザイン手法 Design System デザインシステム

押さえておくこと

ボトムアップでつくるのは、場合による

UIライブラリを作る人は、ボトムアップに作りやすい

実際の事業では、トップダウンでデザインが降ってくるので、ボトムアップ的に部品を作っていくのは難しい

すでに出来上がっているデザインを分解して作る感じ

作ってたら、使えそうだからatomが生まれる的な感じ

adobeXDとかに使えそう？kii.icon

コンポーネントをatomic design的に分けることは、ただ、ファイルを乱立させるよりもわかりやすい！

Visual Regression TestingであるStorybookとセットで使ったほうが良い

1つのComponent コンポーネント codeの修正による影響を確認したい

リンク

Atomic Design を推進するオフィシャル的なサイト＆システムを制作する上のツール

実際に導入するときはここのツールを指針にするのが良さそう

Atomic Design 準拠で制作された CSS Framework

CSS のクラス定義が特徴的

開発者目線以外であればこれでないといけない理由はまだよくわかりませんが、 Atomic Design の理解は深まるかもしれません

本も書いてるAbemaTVの人

他のblog記事も良い

参考コード